@{
    ViewData["Title"] = "Index";
}

<link href="~/css/webuploader.css" rel="stylesheet" />

<p>支持文件多选，如需要修改，可在 GitHub 上联系作者</p>
<div style="margin-top:10px;">
    <button id="filePicker"></button>
</div>
<br />
<div id="fileProgress">

</div><br />


@section Scripts{
    <script src="~/js/webuploader.min.js"></script>
    <script>
        // 全局的文件片信息
        var FileBlock = [];
        var uploadFileCount = 0;  // 文件上传数量

        //注册断点续传，必选在 WebUploader.create 注册之前
        WebUploader.Uploader.register({
            'add-file': 'addFiles',
            'before-send': 'beforeSend',
            'after-send-file': 'afterSendFile'
        }, {
                addFiles: function (files) {
                    // 遍历files中的文件, 过滤掉不满足规则的。
                },
                beforeSend: function (block) {

                    block.chunk = parseInt(block.chunk) + 1; // 从1开始上传

                    // 开始的块数（片数）
                    var startChunk = 0;
                    var currentFile = block.file;
                    for (var i = 0; i < FileBlock.length; i++) {
                        // 服务器的切片文件信息
                        var serverBlockFile = FileBlock[i];
                        if (serverBlockFile.md5 == currentFile.md5) {
                            startChunk = parseInt(serverBlockFile.chunk);
                            break;
                        }
                    }
                    var task = new $.Deferred();

                    // 需要跳过的块（片）
                    if (startChunk > 0 && block.chunk <= startChunk) {
                        task.reject();
                    } else {
                        task.resolve();
                    }

                    return $.when(task);
                },
                afterSendFile: function (file) {
                    uploadFileCount++;
                }
            });

        var uploader = WebUploader.create({
            // swf文件路径
            swf: "~/js/Uploader.swf",
            // 文件接收服务端。
            server: '/Upload/ChunkUpload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#filePicker',
                label: '点击选择文件'
            },
            chunked: true, //分片处理大文件
            chunkSize: 0.3 * 1024 * 1024,
            duplicate: true,   // 可重复上传同一文件
            threads: 1, //上传并发数
            fileNumLimit: 300,
            sendAsBinary: false,
            compress: false, //图片在上传前不进行压缩
            fileSizeLimit: 1024 * 1024 * 1024,    // 1024 M
            fileSingleSizeLimit: 1024 * 1024 * 1024    // 1024 M
        });

        // 当文件被加入队列之前触发
        uploader.on('beforeFileQueued', function (file, file2) {

        });

        // 当文件被加入队列以后触发。
        // 文件加入队列后，通过md5检查服务器最大文件片数
        uploader.on('fileQueued', function (file) {
            addFile(file);

            uploader.md5File(file).progress(function (percentage) {
            }).then(function (val) {

                // 将md5值付给文件对象
                file.md5 = val;
                $.ajax({
                    url: "/Upload/GetMaxChunk",
                    async: false,
                    type: "get",
                    data: { md5: file.md5, ext: file.ext },
                    success: function (response) {
                        if (response.code == "0") {
                            if (response.data && parseInt(response.data) > 1) {
                                //片信息加入到全局对象中
                                FileBlock.push({ id: file.id, md5: val, size: file.size, ext: file.ext, chunk: response.data });
                            }

                            uploader.upload(file);  // 那个文件先md5 好，就先上传
                        } else {
                            console.log("%c 检测切片," + file.name + "," + response.message, 'color: red');
                        }
                    }
                });
            });
        });

        // 当一批文件添加进队列以后触发。
        uploader.on('filesQueued', function () {
            initProgress();
        });

        // 当某个文件的分块在发送前触发
        uploader.on('uploadBeforeSend', function (object, data, headers) {
            if (!object.file.md5) {
                console.log("%c 异常,文件[" + data.name + ",总计" + data.chunks + "片,第" + data.chunk + "片,无MD5值]", 'color: red');
            }
            data.md5 = object.file.md5;
        });

        // 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效
        uploader.on('uploadAccept', function (object, response) {
            if (response.Code == "-1") {
                console.log("%c 服务器返回," + object.file.name + ",总计" + object.chunks + "片,第" + object.chunk + "片，" + response.message, 'color: red');
            }
        });

        // 文件上传成功,合并文件。
        uploader.on('uploadSuccess', function (file, response) {
            if (response && response.code >= 0) {
                var dataObj = response.message;
                var md5 = file.md5;
                if (dataObj == 'chunked') {
                    $.ajax({
                        url: '/Upload/MergeFiles',
                        type: "post", data: { md5: md5, filename: file.name, fileTotalSize: file.size },
                        async: false,
                        success: function (data) {
                            if (!data.result) {
                                $("#fp_" + file.id).find("span").html("").html(data.message);
                                alert('%c 文件合并失败！' + file.name + "," + data.message, 'color: red');
                            } else {
                                if (window.UploadSuccessCallback) {
                                    window.UploadSuccessCallback(file, md5, data);
                                }
                            }
                        }
                    });
                }
                else {
                    if (window.UploadSuccessCallback) {
                        window.UploadSuccessCallback(file, md5);
                    }
                }
            }
        });

        //当文件上传出错时触发。
        uploader.on('uploaderror', function (file, reason) {

            alert("上传失败" + reason);
        });

        //
        uploader.onError = function (code) {
            alert('上传失败，错误： ' + code);
        };

        //显示进度百分比
        uploader.onUploadProgress = function (file, percentage) {
            var bf = percentage * 100 + '%';
            $("#pg_" + file.id).val(percentage * 100);
        };

        //当所有文件上传结束时触发
        uploader.onUploadFinished = function () {
            var fileCount = uploader.getFiles().length;

            //全部上传完成后
            if (parseInt(fileCount) == uploadFileCount) {

                if (window.pagingData) {
                    // 累计上传个数，计算最后一页的页码
                    if (pagingData.RowCount) {
                        pagingData.RowCount += fileCount;
                    } else {
                        pagingData.RowCount = fileCount;
                    }
                }

                uploader.reset();  // 重置队列
                if (window.UploadFinishedCallback) {
                    window.UploadFinishedCallback();
                }
                //    setTimeout(function () { progress.close(); $("#fileProgress").remove(); }, 500);
                uploadFileCount = 0;
            }
        };


        /*--------自有业务添加------*/
        // 当有文件添加进来时执行，负责view的创建
        function addFile(file) {
            var fileSize = parseInt(file.size);
            var mbSize = (fileSize / 1024 / 1024).toFixed(2);
            var $ps = $('<div id="fp_' + file.id + '">' +
                ' <p>' + file.name + '(' + mbSize + 'MB)<span style="color:red;"></span></p>' +
                ' <progress max="100" style="width:475px;" value="0" id="pg_' + file.id + '"></progress> ' +
                '</div>');
            initProgress();
            var $div = $("#fileProgress");
            if ($div.children('div').length == 0) {
                $div.append($ps);
            } else {
                $div.children('div:last').after($ps);
            }
        }

        function initProgress() {
            if ($("#fileProgress").length == 0) {
                $("body").append("<div id='fileProgress'></div>");
            }
        }

    </script>
}
